<template>
  <x-page>
    <x-filter @search="handleSearch" @reset="resetSearch" :itemLength="3">
      <x-filter-item :label="'税率名称'">
        <el-input
          v-model="searchParams.taxRateName"
          :placeholder="'请输入税率名称'"
          clearable
          maxlength="100"
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="'税率编码'">
        <el-input
          v-model="searchParams.taxRateCode"
          :placeholder="'请输入税率编码'"
          clearable
          maxlength="100"
        ></el-input>
      </x-filter-item>
      <x-filter-item :label="'状态'">
        <x-select
          v-model="searchParams.state"
          :options="dictOptions['system.state']"
          style="width: 100%"
          :placeholder="'全部'"
          clearable
        ></x-select>
      </x-filter-item>
    </x-filter>
    <x-data>
      <template #tool>
        <el-row type="flex" class="tools" justify="space-between">
          <el-col :span="20">
            <el-col :span="20">
              <el-button type="primary" :icon="buttonIcons('add')" @click="add"> {{ '新增' }}</el-button>
            </el-col>
          </el-col>
          <el-col :span="4" class="tools-config">
            <x-column-config :columns="columns" @updateColumns="updateColumns" @on-refresh="loadData" />
          </el-col>
        </el-row>
      </template>
      <x-table
        ref="tableCom"
        :pagination="pagination"
        :data-source="tableData"
        :loading="loading"
        :row-key="'id'"
        @on-change="handleTableChange"
        @on-selection-change="handleSelectionChange"
      >
        <el-table-column type="selection" width="55" />
        <el-table-column :label="$t('common.serialNumber')" :width="55" fixed type="index" />
        <el-table-column
          v-for="(item, index) in tableColumns"
          :key="index"
          :prop="item.prop"
          :fixed="item.fixed"
          :show-overflow-tooltip="true"
          :width="item.width"
          :min-width="item.minWidth || '-'"
          :label="item.label"
          :sortable="'custom'"
        >
          <template #default="scope">
            <el-switch
              v-if="item.prop === 'state'"
              :value="scope.row[item.prop]"
              active-color="#4474F6"
              inactive-color="#A5A9B2"
              @change="handleChangeState(scope.row[item.prop], scope.row.id)"
              :disabled="!checkBntPermi('srm:taxRate:enable')"
              :active-value="1"
              :inactive-value="0"
            >
            </el-switch>
            <span v-else>{{ scope.row[item.prop] | emptyVal }}</span>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" :align="'center'" width="160">
          <template #default="scope">
            <more-table-actions
              :permis-list="permissionsActions"
              :action-list="getActions(actions)"
              :row="scope.row"
              @onActionClick="handleActions"
            />
          </template>
        </el-table-column>
      </x-table>
    </x-data>
    <x-dialog
      :title="dialogTitle"
      :show.sync="visible"
      v-if="visible"
      @onCancel="handleClose"
      @onSubmit="handleSubmit"
      width="40%"
    >
      <el-form :model="params" :rules="rules" ref="params" label-position="top">
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item :label="'税率编码'" prop="taxRateCode">
              <el-input v-model="params.taxRateCode" :placeholder="'请输入税率编码'" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="'税率名称'" prop="taxRateName">
              <el-input v-model="params.taxRateName" :placeholder="'请输入税率名称'" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="'税率/%'" prop="taxRate">
              <el-input-number
                v-model="params.taxRate"
                :placeholder="'请输入税率'"
                :precision="2"
                :step="0.01"
                :max="100"
                :min="0"
                clearable
              ></el-input-number>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="'是否启用'" prop="state">
              <x-radio-group :list-data="dictOptions['system.state']" v-model="params.state"></x-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </x-dialog>
  </x-page>
</template>

<script>
  import { buttonIcons, PermissionsMixin, QueryDictMixin, TableListMixin, throttle } from '@package/utils'
  import { taxColumns, taxActions } from '@/modules/config/config/taxConfig.js'
  import {
    apiTaxRateAdd,
    apiTaxRateDelete,
    apiTaxRateDisable,
    apiTaxRateEnable,
    apiTaxRateUpdate,
    listUrl
  } from '@/modules/config/api/purchaseBase.js'
  import { EnumApiCode } from '../../../../../../../globalEnum.js'

  export default {
    name: 'ManagePricing',
    mixins: [TableListMixin, QueryDictMixin, PermissionsMixin],
    data() {
      return {
        columns: taxColumns,
        actions: taxActions,
        listUrl,
        searchParams: {
          taxRateCode: '',
          taxRateName: '',
          state: ''
        },
        tableData: [],
        pagination: {
          pageSize: 10,
          pageNum: 1
        },
        dictKeys: ['system.state'],
        visible: false,
        params: {
          taxRateCode: '',
          taxRateName: '',
          taxRate: 0,
          state: '1'
        },
        rules: {
          taxRateCode: [{ required: true, message: '请输入税率编码', trigger: 'blur' }],
          taxRateName: [{ required: true, message: '请输入税率名称', trigger: 'blur' }],
          taxRate: [{ required: true, message: '请输入税率', trigger: 'blur' }]
        },
        dialogTitle: '新增'
      }
    },
    computed: {
      getActions() {
        return (actions) => {
          return actions.map((action) => {
            action.disabled = false
            return action
          })
        }
      }
    },
    methods: {
      buttonIcons,
      async handleActions({ key, data }) {
        const { id, state } = data
        switch (key) {
          case 'edit': {
            if (id) {
              this.dialogTitle = '编辑'
              this.params = {
                ...data,
                state: `${state}`
              }
            } else {
              this.resetParams()
            }
            this.visible = true
            break
          }
          case 'delete': {
            const confirm = await this.$confirm('是否确定删除?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            if (confirm) {
              const { code } = await apiTaxRateDelete(id)
              if (code === EnumApiCode.Success) {
                this.$message.success('删除成功')
                this.loadData()
              }
            }
            break
          }
          default:
            break
        }
      },
      handleExportExcel() {
        this.handleExport('test')
      },
      handleClose() {
        this.resetParams()
        this.visible = false
      },
      resetParams() {
        this.params = {
          taxRateCode: '',
          taxRateName: '',
          taxRate: 0,
          state: '1'
        }
      },
      async handleChangeState(state, id) {
        const { code } = state === 1 ? await apiTaxRateDisable([id]) : await apiTaxRateEnable([id])
        if (code === EnumApiCode.Success) {
          this.$message.success('操作成功')
          this.loadData()
        }
      },
      handleSubmit: throttle(async function () {
        const methods = this.params.id ? apiTaxRateUpdate : apiTaxRateAdd
        const { code } = await methods(this.params)
        if (code === EnumApiCode.Success) {
          this.visible = false
          this.$message.success(`${this.dialogTitle}成功`)
          this.loadData()
        }
      }, 1000),
      add() {
        this.resetParams()
        this.visible = true
      }
    }
  }
</script>

<style scoped></style>
